<template>
  <view class="category-container">
    <view 
      v-for="(item, index) in categories" 
      :key="index" 
      class="category-item"
      @click="navigateToCategory(item.id)"
    >
      <image 
        :src="item.icon" 
        mode="aspectFill" 
        class="category-icon"
      />
      <text class="category-name">{{ item.name }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "CategoryNav",
  data() {
    return {
      categories: [
        { 
          id: 1,  // 雕塑分类ID
          name: "雕塑", 
          icon: "/static/category/category1.png",
          path: "/pages/category/sculpture"
        },
        { 
          id: 2,  // 编织分类ID
          name: "编织", 
          icon: "/static/category/category2.png",
          path: "/pages/category/weaving"
        },
        { 
          id: 3,  // 刺绣分类ID
          name: "刺绣", 
          icon: "/static/category/category3.png",
          path: "/pages/category/embroidery"
        },
        { 
          id: 4,  // 印染分类ID
          name: "印染", 
          icon: "/static/category/category4.png",
          path: "/pages/category/printing"
        },
        { 
          id: 5,  // 漆器分类ID
          name: "漆器", 
          icon: "/static/category/category5.png",
          path: "/pages/category/lacquer"
        }
      ]
    };
  },
  methods: {
    navigateToCategory(id) {
      const category = this.categories.find(item => item.id === id);
      if (category) {
        uni.navigateTo({
          url: category.path
        });
      }
    }
  }
};
</script>

<style scoped>
/* 原有样式保持不变 */
.category-container {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  background-color: #fff;
  margin: 20rpx 0;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
}

.category-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #f5f5f5;
}

.category-name {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #333;
  text-align: center;
}
</style>